import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import {
  Box,
  Typography,
  Card,
  CardContent,
  Grid,
  Button,
} from '@mui/material'
import DashboardIcon from '@mui/icons-material/Dashboard'
import WorkflowIcon from '@mui/icons-material/AccountTree'
import SettingsIcon from '@mui/icons-material/Settings'

const HomePage = () => {
  const navigate = useNavigate()
  const [user, setUser] = useState<any>(null)

  useEffect(() => {
    // TODO: 获取用户信息
    setUser({
      username: 'test',
      email: 'test@example.com',
      full_name: '测试用户',
      role: 'user',
    })
  }, [])

  const features = [
    {
      title: '工作流管理',
      description: '创建、编辑和管理机器学习工作流',
      icon: <WorkflowIcon sx={{ fontSize: 40 }} />,
      path: '/workflows',
    },
    {
      title: '数据管理',
      description: '上传和管理数据集',
      icon: <DashboardIcon sx={{ fontSize: 40 }} />,
      path: '/datasets',
    },
    {
      title: '模型管理',
      description: '训练和部署机器学习模型',
      icon: <SettingsIcon sx={{ fontSize: 40 }} />,
      path: '/models',
    },
  ]

  return (
    <Box sx={{ p: 3 }}>
      <Typography variant="h4" gutterBottom>
        欢迎回来，{user?.full_name || '用户'}
      </Typography>
      <Typography variant="body1" color="text.secondary" paragraph>
        开始使用 ML Workflow 平台来管理您的机器学习工作流
      </Typography>

      <Grid container spacing={3} sx={{ mt: 2 }}>
        {features.map((feature) => (
          <Grid item xs={12} sm={6} md={4} key={feature.title}>
            <Card>
              <CardContent>
                <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
                  {feature.icon}
                </Box>
                <Typography variant="h6" gutterBottom>
                  {feature.title}
                </Typography>
                <Typography variant="body2" color="text.secondary" paragraph>
                  {feature.description}
                </Typography>
                <Button
                  variant="contained"
                  onClick={() => navigate(feature.path)}
                >
                  开始使用
                </Button>
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>
    </Box>
  )
}

export default HomePage 